<template>
  <q-scroll-area class="project-list" id="scroller-container" v-if="list.length > 0">
    <q-virtual-scroll
      type="list"
      ref="scroller"
      target="scroller-container"
      separator
      :items="list"
    >
      <template v-slot="{ item }">
        <q-item clickable @click="itemClick(item)">
          <div class="column justify-around" style="width: 100%;height: 50px">
            <div class="item-title">{{ item.name }}</div>
            <div class="row justify-between items-center" style="width: 100%">
              <q-icon class="item-icon" name="mdi-file-cloud"></q-icon>
              <div class="item-date" size="12px">{{ formatUpdateDate(item.updateDate) }}</div>
            </div>
          </div>
        </q-item>
      </template>
    </q-virtual-scroll>
  </q-scroll-area>
  <div v-else>
    <div class="fit text-center q-my-md">No Saved files</div>
  </div>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import { Project } from 'pages/studio/StudioProject';
import Moment from 'moment';
const props = defineProps({
  list: {
    type: Array as PropType<Project[]>,
    required: true
  }
})
const emit = defineEmits(['change']);
function formatUpdateDate (date: number) {
  return Moment(date).fromNow();
}
function itemClick (item: Project) {
  emit('change', item);
}
</script>
<style lang="sass" scoped>

.project-list
  width: 100%
  height: 100%
  .item-title
    font-size: 12px
  .item-date
    font-size: 10px
    color: $sub
  .item-icon
    color: #F19D30
</style>